<template>
	<view>
		<!-- <button @click="open" style="margin-top: 10px;color: #008dd4;width: 300px;" class="cu-btn round" :class="[!bordersize?'lines-' +nowDate :'line-' + nowDate, shadow?'shadow':'']">{{nowDate}}</button> -->
		<button @click="open" style="margin-top: 20px;color: #008dd4;" >{{nowDate}}</button>
		<view class="" style="min-height: 30px;padding: 10px;background-color: white;margin-top: 10px;border-radius: 10px;font-weight: bold;">
			汇报昨日店铺数据
		</view>
		<view>
		    <uni-calendar 
		    ref="calendar"
		    :insert="false"
		    @confirm="confirm"
			:clearDate="false"
		     />
		</view>
		     
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in reportList"
			:key="item.id"  @tap="showModal(item)" style="margin: 10px;background-color: white;border-radius: 8px;">
			<view class="topTitleV unitV" style="margin: 10px;padding-top: 10px;font-weight: bold;">{{ item.shop.name }}</view>
			   <!-- 共占一行的元素 -->
			   <div style="display: flex; flex-wrap: wrap;margin: 10px;padding-bottom: 10px;">
			     <view class="topTitleV" style="margin-left: 30px;">{{ item.shop.platform }}</view>
			     <!-- <view class="topTitleV" style="margin-left: 30px;">{{ item.headName }}</view> -->
			     <view class="topTitleV" style="margin-left: 30px;">{{ item.taskTime }}</view>
			     <view class="cellView" :style="{ color: bindColor(item), backgroundColor: bindBgColor(item), marginLeft: 'auto' }">
			       {{ bindTag(item) }}
			     </view>
			   </div>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" v-if="shop" style="z-index: 100;">
			<view class="cu-dialog" style="min-height: 400px;border-radius: 10px;">
				<view class="cu-bar bg-white" style="margin: 10px;border-radius: 8px;">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-green" v-if="report.status == 0" @tap="submitForm">确定</view>
				</view>
				<view class="" style="margin: 10px;border-radius: 8px;">
					<text class="cu-form-group" style="border-radius: 10px 10px 0 0;">{{shop.name}}</text>
					<text class="cu-form-group">{{shop.platform}}</text>
					<input placeholder="请输入GMV值" v-model="report.gmv" style="text-align: left;" class="cu-form-group" :disabled="report.status != 0">
					<input placeholder="请输入利润值" v-model="report.profit" style="text-align: left;border-radius: 0 0 10px 10px;" class="cu-form-group" :disabled="report.status != 0">
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import request from '../../common/request';
	import common from 'common/common.js';
	import zIndex from 'uview-ui/libs/config/zIndex';
	export default {
		data() {
			const currentDate = new Date();
			const formattedCurrentDate = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}`;
			return {
				reportList:[],
				nowDate:formattedCurrentDate,
				staff:{},
				modalName:'',
				report:{},
				shop:{},
			}
		},
		onLoad() {
			// this.staff = {
			// 	id:"42"
			// }
			this.staff = uni.getStorageSync("staff");
			this.getUserReport();
		},
		methods: {
			// 打开日历
			open(){
				this.$refs.calendar.open();
			},
			// 确认选择
			confirm(e) {
				this.nowDate = e.fulldate;
				this.getUserReport();
			},
			
			// 使用正则表达式匹配数字，可以是整数、小数或负数
			isNumber(value) {
			  const numberRegex = /^-?\d+(\.\d+)?$/;
			  // 使用 test 方法检查输入值是否符合正则表达式
			  return numberRegex.test(value);
			},
			// 提交
			submitForm(){
				this.isNumber(this.report.gmv)
				this.isNumber(this.report.profit)
				
				if(!this.isNumber(this.report.gmv) || !this.isNumber(this.report.profit)){
					uni.showToast({
						title:"请输入数字",
						icon:"error",
						zIndex:"9999"
					})
					return;
				}
				var _this = this;
				uni.request({
					url: common.api_base_url+'/shopReport',
					data:{
						report:_this.report
					},
					header:{
					},
					method: 'PUT',
					success: res => {
						console.log(res)
						if(res.data.code == 200){
							_this.getUserReport();
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon:"error"
							})
						}
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
				this.modalName = null
			},
			hideModal(e) {
				this.modalName = null
			},
			showModal(e) {
				this.report = e;
				this.shop = this.report.shop;
				this.modalName = "bottomModal";
			},
			bindTag(item) {
				/** 申请单状态  0-未完成  1-完成 2-超时完成 */
				if(item.status == 0){
					return "未完成";
				} else if (item.status == 1){
					return '完成';
				}else if (item.status == 2){
					return '超时完成';
				}
			},
			bindColor(item) {
				if(item.status == 0){
					return '#888481';
				} else if (item.status == 1){
					return '#3bb100';
				}else if (item.status == 2){
					return '#ff0000';
				}
			},
			bindBgColor(item) {
				// if(item.status == 0){
				// 	return '#F1F4FA';
				// } else if (item.status == 1){
				// 	return '#ff0000';
				// }else if (item.status == 3){
				// 	return '#55ffff';
				// }else if (item.status == 4){
				// 	return '#5555ff';
				// }
			},
			getUserReport(){
				let originalDate = new Date(this.nowDate);
				// 推后一天
				let nextDay = new Date(originalDate);
				nextDay.setDate(originalDate.getDate() - 1);
				// 格式化为"YYYY-MM-DD"格式
				let formattedNextDay = nextDay.toISOString().split('T')[0];
				var _this = this;
				uni.request({
					url: common.api_base_url+'/shopReport/getByStaffIdAndTime',
					data:{
						staffId:_this.staff.id,
						nowDate: formattedNextDay,
					},
					header:{
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 200){
							_this.reportList = res.data.data;
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon:"error"
							})
						}
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
		}
	}
</script>

<style scoped>
$uni-font-size-base:14px;
.uni-calendar__header-text {
		text-align: center;
		width: 100px;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
	}
</style>
